<template>
  <view class="page">
    <view class="history" v-for="item in historyList" :key="item.id">
      <view
        class="image"
        :style="{ backgroundImage: 'url(' + $imageOss(item.avatar, 40, 40) + ')' }"
      />
      <view class="content">
        <view class="">{{ item.name || "-" }}</view>
        <view class="gray">
          {{ item.createtime_text || "-" }}
        </view>
        <view class="mt13">
          {{ item.content || "-" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { myRefundLog } from "@/request/myApi.js";
export default {
  data() {
    return {
      refundId: "", // 退款ID
      historyList: [],
    };
  },
  onLoad(e) {
    this.refundId = e.id;
    this.getData();
  },
  methods: {
    // 获取历史记录
    getData() {
      myRefundLog(this.refundId).then((res) => {
        if (res.code == 1) {
          this.historyList = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f7f7f7;
  min-height: 100vh;
  .history {
    color: #222;
    padding: 26rpx;
    display: flex;
    font-size: 28rpx;
    background-color: #ffffff;
    margin-bottom: 26rpx;
    .image {
      font-variant: small-caps;
      margin: 0;
      padding: 0;
      display: inline-flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      white-space: nowrap;
      position: relative;
      width: 66rpx;
      height: 66rpx;
      background-size: cover;
      background-position: center;
      vertical-align: middle;
      margin-right: 30rpx;
      border-radius: 10rpx;
    }
    .content {
      flex: 1;
      .gray {
        color: #999999;
      }
      .mt13 {
        margin-top: 26rpx;
      }
    }
  }
}
</style>
